<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue3.0动态自定义指令用法</title>
    <link rel="stylesheet" href="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="app">
        <div class="box-container" :ref="el => { if(el)state.boxEl = el}">
            <div class="box" :style="{ 'background':state.background }"
                v-fixed:[state.direction]="state.distance[state.direction]"></div>
        </div>
        <div class="menu">
            <h2>拖动更改元素的偏移</h2>
            <div class="menu-item">
                <label>left:</label>
                <input type="range" min="0" :max="state.maxHorValue" v-model="state.distance.left"
                    :disabled="state.direction !== 'left'">
            </div>
            <div class="menu-item">
                <label>top:</label>
                <input type="range" min="0" :max="state.maxVerValue" v-model="state.distance.top"
                    :disabled="state.direction !== 'top'">
            </div>
            <div class="menu-item">
                <label>right:</label>
                <input type="range" min="0" :max="state.maxHorValue" v-model="state.distance.right"
                    :disabled="state.direction !== 'right'">
            </div>
            <div class="menu-item">
                <label>bottom:</label>
                <input type="range" min="0" :max="state.maxVerValue" v-model="state.distance.bottom"
                    :disabled="state.direction !== 'bottom'">
            </div>
            <div class="menu-item">
                <label>direction:</label>
                <select v-model="state.direction">
                    <option value="left">left</option>
                    <option value="right">right</option>
                    <option value="top">top</option>
                    <option value="bottom">bottom</option>
                </select>
            </div>
            <div class="menu-item">
                <label>background:</label>
                <div id="color-picker" class="color-picker"></div>
            </div>
        </div>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.js"></script>
<script src="./app.js"></script>

</html>